<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>太阳系模拟</title>
    <style>
        body {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #000;
        }
        canvas {
            border: 2px solid #444;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(255,255,255,0.3);
        }
    </style>
</head>
<body>
<canvas id="solarSystemCanvas" width="800" height="800"></canvas>

<script>
    const canvas = document.getElementById('solarSystemCanvas');
    const ctx = canvas.getContext('2d');

    // 中心点坐标
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;

    // 行星数据（包含独立角度）
    const planets = [
        { // 水星
            radius: 4,
            orbitRadius: 100,
            color: '#888',
            speed: 0.003,
            angle: Math.random() * Math.PI * 2 // 随机初始角度
        },
        { // 金星
            radius: 6,
            orbitRadius: 150,
            color: '#C68E2D',
            speed: 0.002,
            angle: Math.random() * Math.PI * 2
        },
        { // 地球
            radius: 7,
            orbitRadius: 200,
            color: '#217BCA',
            speed: 0.0018,
            angle: Math.random() * Math.PI * 2
        },
        { // 火星
            radius: 5,
            orbitRadius: 250,
            color: '#E64A2D',
            speed: 0.0015,
            angle: Math.random() * Math.PI * 2
        },
        { // 木星
            radius: 12,
            orbitRadius: 300,
            color: '#FAC246',
            speed: 0.001,
            angle: Math.random() * Math.PI * 2
        },
        { // 土星
            radius: 10,
            orbitRadius: 350,
            color: '#A3886F',
            speed: 0.0008,
            angle: Math.random() * Math.PI * 2
        }
    ];

    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // 绘制太阳（增大太阳尺寸）
        ctx.beginPath();
        ctx.arc(centerX, centerY, 20, 0, Math.PI*2);
        ctx.fillStyle = '#FFD700';
        ctx.fill();

        // 绘制每个行星及其轨道
        planets.forEach(planet => {
            // 绘制轨道线
            ctx.beginPath();
            ctx.arc(centerX, centerY, planet.orbitRadius, 0, Math.PI*2);
            ctx.strokeStyle = '#666';
            ctx.lineWidth = 0.5;
            ctx.stroke();

            // 计算行星位置
            const x = centerX + Math.cos(planet.angle) * planet.orbitRadius;
            const y = centerY + Math.sin(planet.angle) * planet.orbitRadius;

            // 绘制行星
            ctx.beginPath();
            ctx.arc(x, y, planet.radius, 0, Math.PI*2);
            ctx.fillStyle = planet.color;
            ctx.fill();

            // 更新角度（独立角度）
            planet.angle += planet.speed;
        });

        requestAnimationFrame(draw);
    }

    draw();
</script>
</body>
</html>